import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import AnswerAnalysis from "../answer-analysis/view.vue";
import ViewChoice from "../q-choice/view.vue";
import ViewShortAnswer from "../q-short-answer/view.vue";
import ViewJudge from "../q-judge/view.vue";
import ViewBlank from "../q-blank/view.vue";
import ViewChooseWord from "../q-choose-word/view.vue";
import ViewCaseAnalysis from "../q-case-analysis/view.vue";
import ViewClozeTest from "../q-cloze-test/view.vue";
import ViewListening from "../q-listening/view.vue";
import ViewCompatibility from "../q-compatibility/view.vue";
import ChapterLabelKnowledge from "../chapter-label-knowledge/view.vue";

export default {
	props: {
		/**
		 * @description 题目详情对象，通过对后端返回的试题信息的字段结构解析，来自动渲染展示各种试题
		 * @returns {Object} data
		 * @returns {Array} [data.errorInfo] 试题的错误类型
		 * @returns {String} data.errorInfo[].errorField 试题的错误类型。可选值
		 * @returns {String} data.errorInfo[].errorMessage 试题的错误描述
		 * @returns {String} data.questionType 题目类型
		 * @returns {String} data.questionTitle 题干
		 * @returns {String} [data.answer] 答案说明文本
		 * @returns {String} [data.questionAnswerParse] 试题解析内容
		 * @returns {String} [data.listeningAudioUrl] 听力题音频地址
		 * @returns {Array} data.optionList 选项列表
		 * @returns {String} [data.optionList[].answerSeq] 答案序号(1,2,3,4...)，目前只有选词填空有用
		 * @returns {String} [data.optionList[].optionSeq] 选项序号(A,B,C,D...)
		 * @returns {String} data.optionList[].answerOption 选项内容
		 * @returns {String} data.optionList[].isAnswer 是否是答案 Y:是;N:否
		 * @returns {Array} [data.questionVideoPathList] 视频解析集合
		 * @returns {String} data.questionVideoPathList[].questionVideoPath 视频解析地址
		 * @returns {Array} [data.questionAudioPathList] 音频解析集合
		 * @returns {String} data.questionAudioPathList[].questionAvPath 音频解析地址
		 * @returns {Array} [data.smallQuestionList] 子题列表
		 * @returns {Array} [data.smallQuestionList[].errorInfo] 子题的错误类型
		 * @returns {String} data.smallQuestionList[].errorInfo[].errorField 子题的错误类型。可选值tag,title,options,answer,analysis
		 * @returns {String} data.smallQuestionList[].errorInfo[].errorMessage 子题的错误描述
		 * @returns {String} data.smallQuestionList[].questionTitle 子题题干
		 * @returns {String} data.smallQuestionList[].questionType 子题类型
		 * @returns {String} data.smallQuestionList[].seq 小题排序
		 * @returns {String} data.smallQuestionList[].data.answer 小题答案说明文本
		 * @returns {String} data.smallQuestionList[].data.questionAnswerParse 小题试题解析内容
		 * @returns {Array} data.smallQuestionList[].questionVideoPathList 小题视频解析集合
		 * @returns {String} data.smallQuestionList[].questionVideoPathList[].questionVideoPath 小题视频解析集合
		 * @returns {Array} data.smallQuestionList[].questionAudioPathList 小题音频解析集合
		 * @returns {String} data.smallQuestionList[].questionAudioPathList[].questionAvPath 小题音频解析地址
		 * @returns {Array} data.smallQuestionList[].optionList 小题选项列表
		 * @returns {String} data.smallQuestionList[].optionList[].answerSeq 小题答案序号(1,2,3,4...)，目前只有选词填空有用
		 * @returns {String} data.smallQuestionList[].optionList[].optionSeq 小题选项序号(A,B,C,D...)
		 * @returns {String} data.smallQuestionList[].optionList[].answerOption 小题选项内容
		 * @returns {String} data.smallQuestionList[].optionList[].isAnswer 小题选项是否是答案 Y:是;N:否
		 */
		data: {
			type: Object,
			default: () => {}
		},
		// 是否需要答案解析的展开按钮
		isExpandButton: {
			type: Boolean,
			default: false
		},
		// 是否展开显示当前及小题的答案及解析，变化时会重新展开或缩起
		isExpandAnalysis: {
			type: Boolean,
			default: true
		}
	},
	components: {
		ElImageViewer,
		AnswerAnalysis,
		ViewChoice,
		ViewShortAnswer,
		ViewJudge,
		ViewBlank,
		ViewChooseWord,
		ViewCaseAnalysis,
		ViewClozeTest,
		ViewListening,
		ViewCompatibility,
		ChapterLabelKnowledge,
	},
	data() {
		return {
			isShowViewer: false,
			imgSrc: "",
			parseData: {}
		};
	},
	watch: {
		// 展开配置发生变化时，更新所有的展示隐藏效果
		isExpandAnalysis(val) {
			this.parseData.isShowAnalysis = val;
			if (["A", "CF", "L", "C"].includes(this.parseData.questionType)) {
				this.parseData.smallQuestionList.forEach((i) => {
					i.isShowAnalysis = val;
				});
			}
		},
		// 对传来的数据进行解析，根据基础组件所需参数不同变成组件可以使用的数据
		data: {
			handler(val) {
				const parseData = JSON.parse(JSON.stringify(val));
				this.questionDataHandle(parseData);
				// 复合题型类型，对小题再处理一遍
				if (["A", "CF", "L", "C"].includes(parseData.questionType)) {
					parseData.smallQuestionList.forEach((item) => {
						this.questionDataHandle(item);
						if (parseData.questionType === "C" && ["S", "M", "I"].includes(item.questionType)) {
							// 如果是父题是配伍题类型，并且子题是选择题类型，子题不展示选项列表
							item.optionList = [];
						}
					});
				}
				this.parseData = parseData;
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 因为复合题可能存在小题，小题的数据格式与普通题几乎一致，此函数用来对相似的数据对象进行初始化处理
		questionDataHandle(data) {
			data.isShowAnalysis = this.isExpandAnalysis;
			data.errorInfoTypes = (data.errorInfo || []).map((i) => {
				switch (i.errorField) {
					case "listeningAudioUrl":
						return "title";
					case "questionTitle":
						return "title";
					case "optionList":
						return "options";
					case "answer":
						return "answer";
					case "questionAnswerParse":
						return "analysis";
				}
			});
			data.errorInfoMsgs = (data.errorInfo || []).map((i) => i.errorMessage);
			data.questionVideoPathList = (data.questionVideoPathList || []).map((i) => i.questionAvPath);
			data.questionAudioPathList = (data.questionAudioPathList || []).map((i) => i.questionAvPath);
			// 如果没有答案字段，则根据选项中的数据自己拼出来
			if (!data.answer) {
				data.answer = (data.optionList || []).filter((i) => i.isAnswer === "Y");
				data.answer = data.answer.map((i) => {
					if (["S", "M", "I"].includes(data.questionType)) {
						// 选择题类型取序号作为答案
						return i.optionSeq;
					}
					// 其他类型取选项内容作为答案
					return i.answerOption;
				});
				if (["S", "M", "I"].includes(data.questionType)) {
					// 选择题用,连接
					data.answer = data.answer.join(",");
				} else {
					// 其他类型用※连接
					data.answer = data.answer.join("※");
				}
			} else if (["S", "M", "I"].includes(data.questionType)) {
				// 有答案字段，但是后端可能返回的全是※连接的，进行替换,选择题用,连接
				data.answer = data.answer.replace(/※/g, ",");
			}
			// 分隔符转化为逗号连接
		},
		closeViewer() {
			this.isShowViewer = false;
		},
		// 监听区块的点击事件，如果是图片进行放大
		clickBox({ target }) {
			if (target.nodeName === "IMG") {
				this.imgSrc = target.src;
				this.isShowViewer = true;
			}
		}
	}
};
